<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <div class="panel-lead"><em>成本报表分析</em></div>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">
                <div class="form-inline" style="margin-bottom: 15px;">
                    <div class="form-group">
                        <label>开始日期:</label>
                        <input type="text" class="form-control datetimepicker" id="start_date" value="{:date('Y-m-01')}" data-date-format="yyyy-mm-dd">
                    </div>
                    <div class="form-group">
                        <label>结束日期:</label>
                        <input type="text" class="form-control datetimepicker" id="end_date" value="{:date('Y-m-d')}" data-date-format="yyyy-mm-dd">
                    </div>
                    <a href="javascript:;" class="btn btn-primary btn-search"><i class="fa fa-search"></i> 查询</a>
                </div>
            </div>
        </div>

        <!-- 成本汇总卡片 -->
        <div class="row" id="summary-cards">
            <div class="col-md-3">
                <div class="info-box bg-aqua">
                    <span class="info-box-icon"><i class="fa fa-shopping-cart"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">物料成本</span>
                        <span class="info-box-number" id="material-cost">¥0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box bg-green">
                    <span class="info-box-icon"><i class="fa fa-users"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">人工成本</span>
                        <span class="info-box-number" id="labor-cost">¥0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box bg-yellow">
                    <span class="info-box-icon"><i class="fa fa-cogs"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">制造费用</span>
                        <span class="info-box-number" id="overhead-cost">¥0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box bg-red">
                    <span class="info-box-icon"><i class="fa fa-money"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">总成本</span>
                        <span class="info-box-number" id="total-cost">¥0</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成本趋势图 -->
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">成本趋势分析</h3>
                    </div>
                    <div class="box-body">
                        <div id="cost-trend-chart" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成本结构图 -->
        <div class="row">
            <div class="col-md-6">
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title">成本结构分析</h3>
                    </div>
                    <div class="box-body">
                        <div id="cost-structure-chart" style="height: 350px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="box box-warning">
                    <div class="box-header with-border">
                        <h3 class="box-title">利润分析</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>总收入：</strong><span id="total-revenue">¥0</span></p>
                                <p><strong>总利润：</strong><span id="total-profit">¥0</span></p>
                                <p><strong>平均利润率：</strong><span id="avg-profit-rate">0%</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

